<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <!-- 3. 使用全局组件 -->
      <hello></hello>
    </div>
    <div id="box">
      <h1>{{title}}</h1>
      <!-- 3. 使用全局组件 -->
      <hello></hello>
    </div>
	</body>
  <script src="../vue.js"></script>
  
  <!-- 1. 定义组件模板 -->
  <template id="temp1">
    <div>
      <em>这是 - {{title}}</em>
    </div>
  </template>
  
  <script>
     
    // 2. 注册全局组件
    Vue.component("hello",{
      // template:"<div>这是 - {{title}}</div>",
      template:"#temp1",
      data(){
        return {
          title:"子组件"
        }
      }
    })
    
    new Vue({
      el:"#app",
      data:{
        title:"这是顶层组件-app"
      }
    })
    
    new Vue({
      el:"#box",
      data:{
        title:"这是顶层组件-box"
      }
    })
    
  </script>
</html>
